<!-- 计划统计页 投放广告位top10 -->
<template>
  <div id="planzone" style="min-height: 400px"></div>
</template>

<script>
    export default {
        props: {
            // 名称
            opinion: {
                type: Array,
                default(){
                    return []
                }
            },
            // 图表标题
            titleText: {
                type: String,
                default: ''
            },
            // 提示框标题
            seriesName: {
                type: String,
                default: ''
            },
            // 数据
            opinionData: {
                type: Array,
                default(){
                    return []
                }
            },
        },
        data(){
            return {
                //
            }
        },
        mounted(){
            this.drawPie();
        },
        methods: {
            // 绘制
            drawPie(){
                this.charts = this.$echarts.init(document.getElementById('planzone'));
                this.charts.setOption({
                    title : {
                        text: this.titleText,
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',   //图表距边框的距离
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'value',
                            boundaryGap : [0, 0.01],
                            axisLine: {show: false},
                            axisTick: { show: false},
                            axisLabel : {
                                formatter: function(){
                                    return "";
                                }
                            },
                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'category',
                            data : this.opinion,
                            axisLine: {show: false },
                            axisTick: {show: false},
                        }
                    ],
                    series : [
                        {
                            name:this.seriesName,
                            type:'bar',
                            data:this.opinionData,
                            barWidth: 16,
                            color:['#20a8d8'],
                            label: {
                                normal: {
                                    show: false,
                                    position: 'right',
                                    offset: [5, -2],
                                    textStyle: {
                                        color: '#409eff',
                                        fontSize: 12
                                    }
                                }
                            },
                        }
                    ]
                })
            }
        }
    }
</script>